<template>
  <div class="bgm-wrap">
    <Header/>

    <van-tabs v-model:active="active" animated swipeable>
      <van-tab v-for="{ name, list } in step2Data.tabData.value" :title="name">
          <div class="list">
            <div 
              v-for="item in list"
              class="item" 
              :class="{ active: chooseData.id === item.id }"
              @click="chooseData = item"
            >
              <img class='choose-img' :src="item.mould_image">
              <div class="bottom-info">
<!--                <div v-if='item.desrc_year' class="year" :data-year="item.desrc_year"></div>-->
                <div class="title-des">
                  <div class="title">{{ item.mould_title }}</div>
<!--                  <div class="des van-ellipsis">{{ item.mould_text }}</div>-->
                </div>
              </div>
            </div>
          </div>
      </van-tab>
    </van-tabs>

    <div class="next-btn fixed" @click="submit"></div>
  </div>
</template>

<script setup>
  import { step2Data, stepAction, step1Data } from '@/stores'
  import { getMisc, getStyles } from '@/api'
  import { onBeforeMount, onMounted } from 'vue'

  const active = ref(0)
  const chooseData = shallowRef({})
  function submit() {
    if (!chooseData.value.id) return showToast('请选择您的合拍风格')

    step2Data.chooseData.value = chooseData.value

    stepAction.next()
  }
</script>

<style scoped lang="scss">
  .bgm-wrap {
    display: flex;
    flex-direction: column;
  }

  .list {
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-bottom: .9rem;
  }

  .item {
    width: 2.95rem;
    height: 1.94rem;
    border-radius: .2rem;
    position: relative;
    margin: 0 auto;
    transition: transform .3s;

    &:not(:last-child) {
      margin-bottom: .22rem;
    }

    &.active {
      transform: scale(1.06);
      transform-origin: center;

      &:first-child {
        transform-origin: center top;
      }

      &:after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: .21rem;
        height: .21rem;
        background: url(@/assets/images/active.png) no-repeat center / 100% 100%;
        transform: translate(40%, 40%);
        z-index: 3;
      }
    }

    .bottom-info {
      display: flex;
      width: 100%;
      justify-content: space-between;
      color: #fff;
      position: absolute;
      bottom: 0;

      &:after {
        content: '';
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1));
        height: 100%;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 1;
        position: absolute;
        border-radius: 0 0 .2rem .2rem;
      }

      .year {
        position: relative;
        z-index: 2;
        font-weight: bold;
        font-size: .12rem;
        width: .95rem;
        height: .75rem;
        background: url(@/assets/images/step3-number.png) no-repeat left bottom / 100% auto;

        &:after {
          content: attr(data-year);
          display: block;
          position: absolute;
          left: .32rem;
          top: .35rem;
          transform: rotate(-37deg);
        }
      }

      .title-des {
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: .03rem;
        gap: .04rem 0;
        flex: 1;
        padding-right: .05rem;
        position: relative;
        z-index: 2;
        width: 2rem;

        .title {
          font-size: .16rem;
          padding: .1rem;
        }

        .des {
          font-size: .12rem;
        }
      }
    }
  }
</style>

<style>
  :root {
    --van-tabs-line-height: .44rem;
  }

  .van-tabs {
    margin-top: .2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 1px;
    gap: .22rem;
  }

  .van-tabs__content {
    flex: 1;
  }

  .van-tabs__nav {
    background-color: transparent;
  }

  .van-tab__text {
    font-weight: bold;
    font-size: .16rem;
    color: #666666;
    line-height: normal;
  }

  .van-tab--active .van-tab__text--ellipsis {
    color: #00418F;
  }

  .van-tabs__line {
    background-color: #00418F;
    width: .6rem;
  }

  .van-tab__panel {
    height: 100%;
  }
</style>
